<template>
    <div>
        全部商品
        <div class="app">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane
                    :label="item.category_name"
                    v-for="item in list"
                    :key="item.category_id"
                    :name="String(item.category_id)"
                ></el-tab-pane>
            </el-tabs>
            <div class="amm">
                <ul>
                    <li v-for="(item, index) in cate" :key="index">
                        <img
                            :src="
                                'http://47.115.85.237:3000/' +
                                    item.product_picture
                            "
                            alt=""
                        />
                        <p>{{ item.product_title }}</p>
                        <p>{{ item.product_price }}</p>
                        <el-button type="success" @click="jia(item.product_id)"
                            >加入收藏</el-button
                        >
                        <el-button
                            type="success"
                            @click="shopcar(item.product_id)"
                            >加入购物车</el-button
                        >
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],
            activeName: "",
            cate: [],
            user: { category_name: "全部商品" },
        };
    },
    methods: {
        jia(id) {
            this.$axios
                .post("/api/user/collect/addCollect", {
                    user_id: 1404,
                    product_id: id,
                })

                .then((res) => {
                    // console.log(res);
                });
        },
        shopcar(id) {
            // console.log(id);
            this.$axios
                .post("/api/user/shoppingCart/addShoppingCart", {
                    user_id: 1404,
                    product_id: id,
                })

                .then((res) => {
                    console.log(res);
                });
        },
        handleClick(tab) {
            this.cate = [];
            this.$axios.post("/api/product/getAllProduct").then((res) => {
                res.data.Product.forEach((item) => {
                    if (item.category_id == tab.name) {
                        this.cate.push(item);
                        // console.log(this.cate);
                    }
                });
            });
        },
    },
    mounted() {
        this.$axios.post("/api/product/getCategory").then((res) => {
            this.list = res.data.category;
            this.list.unshift(this.user);
            console.log(this.list);
        });
    },
};
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.app {
    width: 1200px;
    height: 1200px;
    background: #f5f5f5;
    margin: auto;
}
.amm {
    width: 1200px;
    height: 700px;
    // background: red;
    ul {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-around;
        li {
            width: 23%;
            height: 360px;
            background: white;
            margin: 10px;
            img {
                width: 200px;
                height: 200px;
            }
            p {
                margin-top: 10px;
            }
        }
    }
}
</style>
